<template>
	<view class="page">
			<view class="typeArr">
				<text :class="activeStatus==item.type ? 'activeText' :'' "  v-for="(item,index) in typeArr" :key="index" @click="changeType(item.type)">{{item.name}}</text>
			</view>
				<scroll-view class="arr"  scroll-y @scrolltolower="scrolltolower">
					<view class="arrItem" v-for="(item,index) in orderArr" :key="index">
						<!-- <view class="topContent"  @click="junit('/pages/prefile/order/orderDetail' , {orderId: item.id, type : 1})"> -->
						<view class="topContent" >
							<view class="OrderNo">
								订单号：<text>{{item.order_no}}</text> 
							</view>
							<view class="orderType">
								{{item.delivery_status_name}}
							</view>
						</view>
						
						<!-- <view  class="middleContent"  @click="junit('/pages/prefile/order/orderDetail' , {orderId: item.id,type : 1})"> -->
						<view  class="middleContent" >
							<view class="box">
								<view class="cover">
									<u-image  mode="widthFix"  width="90" height="90" lazy-load :src="item.order_goods[0].sku_image" :fade="true" duration="450">
										<u-loading slot="loading"></u-loading>
									</u-image>
								</view>
								<view class="name">
									{{item.order_goods[0].goods_name}} <text style="margin-left: 15rpx;color: #C8C7CC;font-weight: 400;">{{item.order_goods[0].goods_option_title }}</text>
								</view>
								<view class="price">
									¥{{item.order_goods[0].goods_money}}
									<view class="num">
										x{{item.order_goods[0].num}}
									</view>
								</view>
							</view>
							<view class="count">
								共{{item.num}}件商品 实付：<text>￥{{item.order_money}}</text>
							</view>
						</view>
						
						<view class="bottomContent" v-if="item.action.length">
							<text v-if="item2.title != '联系客服'"  :class="index2 ==0 ?'cancel-btn btn' : 'btn' " v-for="(item2,index2) in item.action" :key="index2" @click="orderHandle(item2.title,item.order_id)" >{{item2.title}}</text>
						</view>
					</view>
					
					<noMore v-if="!orderArr.length"></noMore>
				</scroll-view>
			
	</view>
</template>

<script>
	
	import noMore from '@/components/noMore/noMore.vue'
	export default {
		components:{
			noMore,
		},
		data() {
			return {
				typeArr:[
					{
						name:'全部',
						type:'all'
					},
					{
						name:'待付款',
						type: 'waitpay',
					},
					{
						name:'待发货',
						type: 'waitsend',
					},
					{
						name:'待收货',
						type: 'waitconfirm'
					},
					{
						name:'已完成',
						type: 'waitrate'
					},
				],
				activeStatus: -1,
				orderArr:[	],
				page: 1,
			};
		},
		methods:{
			scrolltolower(){
				console.log('触底了');
				// if(!this.nextPage){
				// 	return
				// }
				this.page++
				this.initArr()
			},
			orderHandle(_btnName,_orderId){
				console.log(_btnName);
				if(_btnName=='取消订单'){
					this.cancelOrder(_orderId)
				}else if(_btnName=='支付'){
					this.$Router.replace({
						path:  `/pages/order/payment/method`,
						query: {
							orderId : _orderId,
							// goodsId: this.goodsId,
							payState: 'paying',
							goodsType: 1,//商品类型 1 普通商品
							// isAddress: this.isAddress,
						}
					});
				}else if(_btnName=='查看物流'){
					this.goPage('/pages/prefile/express-list/express-list',{id: _orderId})
				}else if(_btnName=='确认收货'){
					this.confirmOrder(_orderId)
				}else if(_btnName=='删除订单'){
					this.deleteOrder(_orderId)
				}
			},
			deleteOrder(_id){
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '确认删除订单？',
				    success: function (res) {
				        if (res.confirm) {
				            that.myHttp({
				            	url:'/addons/yun_shop/api.php',
				            	data : {
				            		route: 'order.operation.delete',
				            		order_id : _id
				            	}
				            }).then(res=>{
				            	if(res.code== 1){
				            		that.getTypeArr()
				            		uni.showToast({
				            		    title: '删除成功',
				            		    duration: 3000,
				            		    icon: 'success'
				            		});
				            	}
				            })
				        } else if (res.cancel) {
							return
				        }
				    }
				});
				
			},
			cancelOrder(_id){
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '确认取消订单？',
				    success: function (res) {
				        if (res.confirm) {
				           that.myHttp({
				           	url:'/addons/yun_shop/api.php',
				           	data : {
				           		route: 'order.operation.close',
				           		order_id : _id
				           	}
				           }).then(res=>{
				           	if(res.code== 1){
				           		that.getTypeArr()
				           		uni.showToast({
				           		    title: '取消成功',
				           		    duration: 3000,
				           		    icon: 'success'
				           		});
				           	}
				           })
				        } else if (res.cancel) {
							return
				        }
				    }
				});
			},
			confirmOrder(_id){
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '确认订单收货？',
				    success: function (res) {
				        if (res.confirm) {
				          that.myHttp({
				          	url:'/api/order/takedelivery',
				          	data : {
				          		order_id : _id
				          	}
				          }).then(res=>{
				          	if(res.code== 1){
				          		that.getTypeArr()
				          		uni.showToast({
				          		    title: '收货成功',
				          		    duration: 3000,
				          		    icon: 'success'
				          		});
				          	}
				          })
				        } else if (res.cancel) {
							return
				        }
				    }
				});
			},
			changeType(_status){
				this.activeStatus = _status
				this.page = 1
				this.getTypeArr()
			},
			getTypeArr(_dataParams){
				this.myHttp({
					url:'/api/order/lists',
					data : {
						status : this.activeStatus
					}
				}).then(res=>{
						if(this.page== 1){
						   this.orderArr = []
						}
					  this.orderArr	= this.orderArr.concat(res.data.list)
					 console.log(this.orderArr);
					 this.orderArr.forEach(item=>{
						 // console.dir(item);
						 console.log(item.order_goods[0]);
						 console.log(item.order_goods[0].goods_name);
					 })
				})
			},
			
			initArr(){
				let dataParams
				if(this.activeStatus==0){
					// 全部
					dataParams = {
						route : 'order.list',
						page : this.page,
					}
					this.getTypeArr(dataParams)
				}else if(this.activeStatus==1){
					// 待付款
					dataParams = {
						route : 'order.list.waitPay',
						page : this.page,
					}
					this.getTypeArr(dataParams)
				}else if(this.activeStatus==2){
					// 待发货
					dataParams = {
						route : 'order.list.waitSend',
						page : this.page,
					}
					this.getTypeArr(dataParams)
				}else if(this.activeStatus==3){
					// 待收货
					dataParams = {
						route : 'order.list.waitReceive',
						page : this.page,
					}
					this.getTypeArr(dataParams)
				}else if(this.activeStatus==4){
					// 已完成
					dataParams = {
						route : 'order.list.Completed',
						page : this.page,
					}
					this.getTypeArr(dataParams)
				}
			}
		},
		filters:{
			typeFilter(_type){
				if(_type==1){
					return '待付款'
				}else if(_type==2){
					return '待发货'
				}else if(_type==3){
					return '待收货'
				}else if(_type==4){
					return '已完成'
				}else if(_type==-1){
					console.log('已关闭'+_type);
					return '已关闭'
				}
			}
		},
		onLoad({type}) {
			this.activeStatus = type
		},
		onShow() {
			this.getTypeArr()
			// this.initArr()
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #F8F8F8;
		height: 100%;
		.typeArr{
			background-color: #fff;
			display: flex;
			width: 100%;
			height: 80rpx;
			align-items: center;
			text{
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC;
				color: #000000;
				display: flex;
				justify-content: center;
				
			}
			.activeText{
				color: #FF5113;
				position: relative;
				&:after{
					content: '';
					position: absolute;
					bottom: -45%;
					width: 90rpx;
					height: 8rpx;
					background: #FF5113;
					border-radius: 4rpx;
				}
			}
		}
	
		.arr{
			// height: calc( 100% - 120rpx );
			height: 85vh;
			padding: 16rpx 25rpx;
			background-color: #F8F8F8;
			.arrItem{
				width: 700rpx;
				// height: 368rpx;
				background: #FFFFFF;
				border-radius: 10px;
				margin-bottom: 18rpx;
				// display: flex;
				// flex-direction: column;
				.topContent{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 18rpx;
					height: 76rpx;
					border-bottom: 2rpx solid #eee;
					.OrderNo{
						text{
						}
					}
					.orderType{
						color: $themeColor;
						font-size: 24rpx;
					}
				}
				.middleContent{
					height: 186rpx;
					padding: 0 19rpx;
					.box{
						height: 120rpx;
						display: flex;
						align-items: center;
						.cover{
							width: 90rpx;
							height: 90rpx;
							border-radius: 10rpx;
							margin-right: 17rpx;
						}
						image{
							width: 90rpx;
							height: 90rpx;
							border-radius: 10rpx;
							margin-right: 17rpx;
						}
						.name{
							font-size: 26rpx;
							line-height: 43rpx;
							font-weight: 600;
							flex: 1;
						}
						.price{
							margin-left: 30rpx;
							.num{
								color: #ADADAD;
								text-align: right;
							}
						}
						
					}
					.count{
						display: flex;
						justify-content: flex-end;
						color: #000;
						text{
							color: $themeColor;
							font-weight: 600;
						}
					}
				}
				.bottomContent{
					height: 104rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					border-top: 2rpx solid #eee;
					padding-right: 22rpx;
					.cancel-btn{
						border: 2rpx solid #000 !important;
						color: #000 !important;
					}
					.btn{
						height: 50rpx;
						display: grid;
						place-items : center;
						margin-left: 40rpx;
						padding: 0rpx 25rpx;
						background: #FFFFFF;
						border: 2rpx solid #FF5113;
						border-radius: 25rpx;
						font-size: 25rpx;
						color:  #FF5113;
					}
				}
			}
		}
	}

</style>
